<template>
	<view class="exam">
		<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
			activeColor="#007aff"></uni-segmented-control>
		<view class="content">
			<view v-show="current === 0">
				<uni-card v-for="(item,index) in list" :key="index" v-if="list.length !== 0">
					<view class="title">
						<text>{{ item.name }}</text>
						<button>考试</button>
					</view>
					<view class="body">
						开始时间:{{ item.publish_date }}
						<br />
						结束时间:{{ item.over_date }}
					</view>
					<view class="bottom">
						<text>限时 <text>{{ item.duration }}</text>分钟</text>
						<button @click="toStart(item.id)">开始答题</button>
					</view>
				</uni-card>
				<!-- 				<uni-card>
					<view class="title">
						<text>党史知识竞赛</text>
						<button>考试</button>
					</view>
					<view class="body">
						2022-03-0100:00-2022-12-3100:00
					</view>
					<view class="bottom">
						<button class="info">已结束</button>
						<text>限时<text style="color: #6dc1bb;">{{ 20 }}</text>分钟</text>
					</view>
				</uni-card> -->
				<view v-else class="without">
					<image src="@/static/without.png" mode=""></image>
				</view>
			</view>
			<view v-show="current === 1">
				<uni-card v-for="(item,index) in resultList" :key="index" v-if="resultList.length !== 0">
					<view class="title">
						<text>{{ item.name }}</text>
					</view>
					<view class="body">
						开始时间:{{ item.start_time }}
						<br />
						结束时间:{{ item.end_time }}
					</view>
					<view class="bottom">
						<text>分数:<text>{{ item.score }}</text>分</text>
						<button @click="toResults(item.id)" style="width: 130px;">查看结果详情</button>
					</view>
				</uni-card>
				<view v-else class="without">
					<image src="@/static/without.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
	<view style="width: 100%;height: 50px;">

	</view>
</template>

<script>
	import {
		getList,
		examResult
	} from '@/api/exam.js'
	import {mixin} from '@/static/mixin.js'
	export default {
		mixins:[mixin],
		data() {
			return {
				items: ['考试列表', '考试日志 '],
				current: 0,
				active: 0,
				list: [],
				resultList: [],
			};
		},
		created() {
			let that = this;
			getList().then(res => {
				that.list = res;
			})
		},
		methods: {
			toResults(id) {
				uni.navigateTo({
					url: `/pages/exam/results/index?id=${id}`
				})
			},
			onClickItem(e) {
				this.current = e.currentIndex;
				let that = this;
				if (e.currentIndex === 0) {
					getList().then(res => {
						that.list = res;
					})
				} else {
					examResult().then(res => {
						that.resultList = res.list;
					})
				}
			},
			group(val) {
				this.active = val;
			},
			Class(val) {
				this.active = val;
			},
			toStart(id) {
				uni.navigateTo({
					url: `/pages/exam/start/index?id=${id}`
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.without {
		width: 100%;
		height: 80%;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 200px;
			height: 200px;
		}
	}

	.exam {
		background-color: $uni-bg-color;
		margin-top: 10px;
	}

	.content {
		.title {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			text {
				font-size: 20px;
				// font-weight: 700;
				color: $uni-text-color;
			}

			button {
				margin: 0;
				background-color: rgba(0, 0, 0, 0);
				color: $uni-color-primary;
				border: $uni-color-primary solid 1px;
				border-radius: 0;
				height: 30px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.body {
			margin-top: 10px;
			margin-bottom: 10px;
		}

		.bottom {
			display: flex;
			justify-content: space-between;
			align-items: center;

			button {
				font-size: 16px;
				color: $uni-text-color-white;
				background-color: $uni-color-primary;
				margin: 0;
				border-radius: 25px;
				width: 100px;
			}

			text {
				font-size: 17px;
			}
		}
	}

	.info {
		background-color: $uni-color-info !important;
	}
</style>
